<template>
    <div>
        <div class="hearder-top">
            <span class="fa fa-chevron-left" @click="back"></span>
            <span>登录我的世纪购</span>
            <router-link to="/regist">注册</router-link>
        </div>
        <div id="slogin">
            <span class="fa fa-user"></span>
            <input type="text" id="account" name="account" placeholder="用户名/邮箱/手机号" v-model="account">
            <br>
            <span class="fa fa-lock"></span>
            <input type="password" id="psw" name="psw" placeholder="请输入密码" v-model="psw">
            <input id="userPwdShow" type="text"style="display:none;" placeholder="请输入密码"  v-model="psw"/>
            <br>
            <div id="mm">
                <input type="checkbox" @click="showPsw">
                <span >显示密码</span>
                <span style="color:red">忘记密码</span>
                
            </div>
            <button @touchstart="logBtn">登录</button>
        </div>
        <TabBar></TabBar>
    </div>
</template>

<script>
import TabBar from '@/components/TabBar.vue'
export default {
    data:function(){
        return{
            account:"",
            psw:"",
            check:false
        }
    },
    components:{
        TabBar
    },
    methods:{
        back:function(){
            history.back();
        },
        logBtn:function(){
            var params = {
                account:this.account,
                psw:this.psw
            }
            this.$store.dispatch("requestLogin",params)
            .then(res=>{
                 layer.msg(res.data.msg)
                 if(!res.data.err){
                     this.$store.commit("setUserinfo",res.data.userinfo)
                     location.reload(); 
                 }
            })
        },
        showPsw:function(){
            if(this.check==true){
                $("#psw").hide();
                $("#userPwdShow").show();
            }else{
                $("#psw").show();
                $("#userPwdShow").hide();
            }


        }
        // showAccountPwd:function(obj) {
        //     var checked = $(obj).attr("checked");
        //     if (checked == "checked") {
        //         $("#psw").hide();
        //         $("#userPwdShow").show();
        //         $("#userPwdShow").val($("#psw").val());
        //     }
        //     else {
        //         $("#psw").show();
        //         $("#userPwdShow").hide();
        //         $("#psw").val($("#userPwdShow").val());
        //         $("#userPwdShow").val("");
        //     }
        // },
        // enterShowValue:function(obj) {
        //     $("#psw").val($("#userPwdShow").val());
        // }
    },
}
</script>

<style scoped>
   .hearder-top{
        background-color:red;
        position:fixed;
        left:0;
        top:0;
        width:100%;
        height:40px;
        z-index:1;
        display:flex;
        justify-content:space-around;
    }
    .hearder-top span{
        color:white;
        line-height:40px;
    }
    .hearder-top a{
        color:white;
        text-decoration:none;
        line-height:40px;
    }
    #slogin{
        margin-top:50px;
    }
    #slogin span{
        width: 20%;
        font-size: 14px;
    }
    input{
        width: 75%;
        height: 40px;
        border-bottom: solid 1px #999999;
        border-left: none;
        border-right: none;
        border-top: none;
        display: inline-block;
    }
    button{
        border: none;
        width: 90%;
        height: 30px;
        line-height: 30px;
        margin-top: 15px;
        color: white;
        background-color:red;
    }
    #mm{
        height:40px;
    }
    #mm input{
        width:0;
        height:0;
    }
    #mm span{
        line-height:40px;
        margin-right:30px;
    }
</style>